<template>
  <div class="search">
    <van-nav-bar fixed placeholder>
      <template #left>
        <van-icon name="revoke" @click="back" />
      </template>
      <template #title>
        <van-cell-group>
          <van-field v-model="seachValue" label="搜索" placeholder="请输查询内容" @focus="focus" />
        </van-cell-group>
      </template>
      <template #right>
        <van-icon name="search" size="18" @click="search" />
      </template>
    </van-nav-bar>

    <van-loading v-show="show" color="#1989fa" />
    <van-grid v-show="show2">
      <van-grid-item text="历史搜索: " />
      <van-grid-item :text="item.tag" v-for="(item, i) in historyList" :key="i" @click="searchTag(item.tag)" />
    </van-grid>
    <van-row>
      <van-col span="12" v-for="(item, i) in list" :key="i">
        <van-image width="12rem" fit="cover" :src="'data:image/png;base64,' + item.photo" />
        <van-field v-model="item.content" rows="1" autosize type="textarea" />
        <van-image class="photo" round width="1.6rem" height="1.6rem" :src="'data:image/png;base64,' + item.userPhoto"
          @click="seeOne(item.userId)" />
        &nbsp;<span class="time">{{ item.createTime }}</span>
        <div>
          &nbsp;<span class="author">{{ item.username }}</span>
          &nbsp;<span class="sex">{{ item.sex }}</span>
          &nbsp;<span class="distance">{{ item.distance }}m</span>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  name: 'Search',
  data() {
    return {
      historyList: [],
      list: [],
      show2: true,
      pageNum: 1,
      pageSize: 10,
      seachValue: '',
      show: false,
    }
  },
  created: function () {
    const tel = window.localStorage.getItem("dazi_")
    this.$axios.get('http://localhost:9090/dazi/history/findByTel?tel=' + tel)
      .then(res => {
        this.historyList = res.data;
        this.show = false
      })
  },
  methods: {

    focus() {
      this.seachValue = ''
      this.list = []
      this.historyList = []
      const tel = window.localStorage.getItem("dazi_")
      this.$axios.get('http://localhost:9090/dazi/history/findByTel?tel=' + tel)
        .then(res => {
          this.historyList = res.data;
        })

      this.show2 = true
    },
    seeOne(userId) {
      this.$router.push({ path: '/seeOne', query: { userId: userId } })
    },
    back() {
      this.$router.push("/")
    },
    //上拉刷新
    onLoad() {

    },
    //下拉
    onRefresh() {

    },
    searchTag: function (tag) {
      this.seachValue = tag
      this.search()
    },
    search: function () {
      if (this.seachValue) {
        this.show2 = false
        this.show = true
        this.$axios.get('http://localhost:9090/dazi/content/search?content=' + this.seachValue)
          .then(res => {
            this.list = res.data;
            this.show = false
          })
        const tel = window.localStorage.getItem("dazi_")
        this.$axios.get('http://localhost:9090/dazi/history/save?tag=' + this.seachValue + "&tel=" + tel)
          .then(res => {

          })
      } else {
        this.$toast("请输入查询内容")
      }
    },

  }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.van-field__label {
  width: 2.2rem;
}

.time {
  font-size: 12px;
}

.van-col {
  margin: 20px 0;
}

.van-loading {
  margin-left: 50%;
  margin-top: 20px;
}
</style>
